import Modal from 'ant-design-vue/es/modal'
import Vue from 'vue'

// export const Dialog = (Vue, component, componentProps, modalProps) => {
//   const _vm = this
//   modalProps = modalProps || {}
//   if (!_vm || !_vm._isVue) {
//     return
//   }
//   let dialogDiv = document.querySelector('body>div[type=dialog]')
//   if (!dialogDiv) {
//     dialogDiv = document.createElement('div')
//     dialogDiv.setAttribute('type', 'dialog')
//     document.body.appendChild(dialogDiv)
//   }

//   const handle = function (checkFunction, afterHandel) {
//     if (checkFunction instanceof Function) {
//       const res = checkFunction()
//       if (res instanceof Promise) {
//         res.then(c => {
//           c && afterHandel()
//         })
//       } else {
//         res && afterHandel()
//       }
//     } else {
//       // checkFunction && afterHandel()
//       checkFunction || afterHandel()
//     }
//   }

//   const dialogInstance = new Vue({
//     data () {
//       return {
//         visible: true
//       }
//     },
//     router: _vm.$router,
//     store: _vm.$store,
//     mounted () {
//       this.$on('close', (v) => {
//         this.handleClose()
//       })
//     },
//     methods: {
//       handleClose () {
//         handle(this.$refs._component.onCancel, () => {
//           this.visible = false
//           this.$refs._component.$emit('close')
//           this.$refs._component.$emit('cancel')
//           dialogInstance.$destroy()
//         })
//       },
//       handleOk () {
//         handle(this.$refs._component.onOK || this.$refs._component.onOk, () => {
//           this.visible = false
//           this.$refs._component.$emit('close')
//           this.$refs._component.$emit('ok')
//           dialogInstance.$destroy()
//         })
//       }
//     },
//     render: function (h) {
//       const that = this
//       const modalModel = modalProps && modalProps.model
//       if (modalModel) {
//         delete modalProps.model
//       }
//       const ModalProps = Object.assign({}, modalModel && { model: modalModel } || {}, {
//         attrs: Object.assign({}, {
//           ...(modalProps.attrs || modalProps),
//           // footer: () => {
//           //   const attrs = modalProps.attrs || modalProps
//           //   if (typeof attrs.footer === 'function') {
//           //     return attrs.footer.bind(this)
//           //   }
//           //   console.log(1111, attr)
//           //   return attrs.footer
//           // }
//         }, {
//           visible: this.visible,
//         }),
//         on: Object.assign({}, {
//           ok: async () => {
//             const ok = (modalProps.on || modalProps).ok;
//             if (ok) {
//               const result = await ok.apply(this)
//               result && that.handleOk()
//             } else {
//               that.handleOk()
//             }
//           },
//           cancel: async () => {
//             that.handleClose()
//           }
//         })
//       })

//       const componentModel = componentProps && componentProps.model
//       if (componentModel) {
//         delete componentProps.model
//       }
//       const ComponentProps = Object.assign({}, componentModel && { model: componentModel } || {}, {
//         ref: '_component',
//         attrs: Object.assign({}, {
//           ...((componentProps && componentProps.attrs) || componentProps)
//         }),
//         on: Object.assign({}, {
//           ...((componentProps && componentProps.on) || componentProps)
//         })
//       })

//       return h(Modal, ModalProps, [h(component, ComponentProps)])
//     }
//   }).$mount(dialogDiv)
// }

export function dialog (component, componentProps, modalProps) {
  const _vm = this
  modalProps = modalProps || {}

  // debugger

  // if (!_vm || !_vm._isVue) {
  //   return
  // }
  let dialogDiv = document.querySelector('body>div[type=dialog]')
  if (!dialogDiv) {
    dialogDiv = document.createElement('div')
    dialogDiv.setAttribute('type', 'dialog')
    document.body.appendChild(dialogDiv)
  }

  const handle = function (checkFunction, afterHandel) {
    if (checkFunction instanceof Function) {
      const res = checkFunction()
      if (res instanceof Promise) {
        res.then(c => {
          c && afterHandel()
        })
      } else {
        res && afterHandel()
      }
    } else {
      // checkFunction && afterHandel()
      checkFunction || afterHandel()
    }
  }

  const dialogInstance = new Vue({
    data () {
      return {
        visible: true,
        confirmLoading: false
      }
    },
    // router: _vm.$router,
    // store: _vm.$store,
    mounted () {
      this.$on('close', (v) => {
        this.handleClose()
      })
    },
    methods: {
      handleClose () {
        handle(this.$refs._component.onCancel, () => {
          this.visible = false
          this.$refs._component.$emit('close')
          this.$refs._component.$emit('cancel')
          dialogInstance.$destroy()
        })
      },
      handleOk () {
        handle(this.$refs._component.onOK || this.$refs._component.onOk, () => {
          this.visible = false
          this.$refs._component.$emit('close')
          this.$refs._component.$emit('ok')
          dialogInstance.$destroy()
        })
      }
    },
    render: function (h) {
      const that = this
      const modalModel = modalProps && modalProps.model
      if (modalModel) {
        delete modalProps.model
      }
      const ModalProps = Object.assign({}, modalModel && { model: modalModel } || {}, {
        attrs: Object.assign({}, {
          ...(modalProps.attrs || modalProps),
          // footer: () => {
          //   const attrs = modalProps.attrs || modalProps
          //   if (typeof attrs.footer === 'function') {
          //     return attrs.footer.bind(this)
          //   }
          //   console.log(1111, attr)
          //   return attrs.footer
          // }
        }, {
          visible: this.visible,
          confirmLoading: this.confirmLoading
        }),
        on: Object.assign({}, {
          ok: async () => {
            const ok = (modalProps.on || modalProps).ok;
            if (ok) {
              try {
                this.confirmLoading = true
                const result = await ok.apply(this)
                result && that.handleOk()
              } finally {
                this.confirmLoading = false
              }
            } else {
              that.handleOk()
            }
          },
          cancel: async () => {
            const cancel = (modalProps.on || modalProps).cancel;
            if (cancel) {
              try {
                // this.confirmLoading = true
                const result = await cancel.apply(this)
                if (typeof result !== 'boolean' || result) {
                  that.handleClose()
                }
              } finally {
                // this.confirmLoading = false
              }
            } else {
              that.handleClose()
            }
          }
        })
      })

      const componentModel = componentProps && componentProps.model
      if (componentModel) {
        delete componentProps.model
      }
      const ComponentProps = Object.assign({}, componentModel && { model: componentModel } || {}, {
        ref: '_component',
        attrs: Object.assign({}, {
          ...((componentProps && componentProps.attrs) || componentProps)
        }),
        on: Object.assign({}, {
          ...((componentProps && componentProps.on) || componentProps)
        })
      })

      return h(Modal, ModalProps, [h(component, ComponentProps)])
    }
  }).$mount(dialogDiv)
}

export default (Vue) => {
  
  Object.defineProperty(Vue.prototype, '$dialog', {
    get: () => {
      return function () {
        dialog.apply(this, arguments)
      }
    }
  })
}
